<template>
  <el-dialog v-model="showHistorySubmit" :title="props.formId ? '当前表单填写记录' : '表单填写记录'" width="660px" @close="handleClose">
    <text v-if="!props.formId" type="info">仅展示登录后填写的表单记录</text>
    <el-table :data="historyList" border>
      <el-table-column prop="paperName" label="表单名称" align="center" width="" />
      <el-table-column prop="time" label="提交时间" align="center" width="180" />
      <el-table-column prop="state" label="状态" align="center" width="120">
        <template #default="scope">
          <el-tag :type="stateMapping[scope.row.state].type">{{ stateMapping[scope.row.state].label }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link size="small" @click="handleHistoryDetail(scope.row)"
            >详情</el-button
          >
          <el-button v-if="props.formId" type="primary" link size="small" @click="handleHistorySubmit(scope.row)"
            >继续填写</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="detailVisible" title="填写详情" width="700px">
      <FormEcho
        :formData="curFormConfig"
        height="70vh"
        :disabled="true"
        :showDevice="false"
        :simple="true"
      />
    </el-dialog>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { selectPaperResultList, selectPaperResult } from '@/api/form'
import { formatDate } from '@/utils/tools'
import FormEcho from './FormEcho.vue'

const props = defineProps({
  formId: {
    type: [String, Number],
    default: ''
  }
})
const emits = defineEmits(['update:show', 'apply'])
const stateMapping = {
  0: {label: '待审核', type: 'warning'},
  1: {label: '已通过', type: ''},
  2: {label: '未通过', type: 'danger'}
}
// 历史记录数据
const showHistorySubmit = ref(false)
const historyList = ref([])
const getHistoryList = async () => {
  const res = await selectPaperResultList({ paperId: props.formId })
  if (res.code === 20000 && res.data.length > 0) {
    historyList.value = res.data.map((item) => ({
      ...item,
      time: formatDate(item.time)
    }))
  }
  // 如果传了formId且没有历史记录，则不展示
  if (props.formId && res.data.length === 0) return
  showHistorySubmit.value = true
}
getHistoryList()

// 查看填写详情
const curFormConfig = ref({})
const curFormResult = ref({})
const detailVisible = ref(false)
const handleHistoryDetail = async (data) => {
  const res = await selectPaperResult({ id: data.resultId, formId: data.paperId })
  if (res.code === 20000) {
    curFormConfig.value = res.data
    curFormResult.value = {}
    res.data.formItemList.forEach((item) => {
      if (!item.modelValue) return
      curFormResult.value[item.formItemId] = item.modelValue
    })
    detailVisible.value = true
  }
}

const handleHistorySubmit = async (data) => {
  const res = await selectPaperResult({ id: data.resultId, formId: data.paperId })
  if (res.code === 20000) {
    let formData = {}
    res.data.formItemList.forEach((item) => {
      if (!item.modelValue) return
      formData[item.formItemId] = item.modelValue
    })
    showHistorySubmit.value = false
    emits('apply', formData)
  }
}

const handleClose = () => {
  emits('update:show', false)
}
</script>

<style lang="scss" scoped></style>
